const base = require('./webpack.base')
const { merge } = require('webpack-merge')
const webpack = require('webpack')
let path = require('path')
const mock = require('../mock')
module.exports = merge(base, {
  mode: 'development',
  devtool: 'eval-cheap-module-source-map',
  plugins: [
    new webpack.DefinePlugin({
      // 定义一些编译阶段全局变量
      BASEURL: "'/api'",
    }),
  ],
  devServer: {
    // 这里的配置和你打包上线的时候没有任何关系
    port: 3000, // 配置前端服务的端口号
    open: true,// 服务启动之后默认打开浏览器
    static: [
      //  把css文件夹 当作一个静态服务文件了， 这是我们就可以直接域名+路径去访问css中的内容了
      {
        directory: path.resolve(__dirname, '../css')
      },
      {
        directory: path.resolve(__dirname, '../json')
      }
    ],
    hot: true,//HMR - hot module replacement // 热更新页面不刷新，只更新对应模块；
    proxy: {
      // '/api': 'https://www.baidu.com',
      // 当前端请求的地址是 /api/xxx-->localhost:3000/api/xxx ----> https://www.baidu.com/api/xxx
      '/api': {
        target: "https://www.baidu.com",
        pathRewrite: {
          "^/api": '' // /api/xxx-->localhost:3000/api/xxx ----> https://www.baidu.com/xxx
        },
        changeOrigin: true
      }
    },
    onBeforeSetupMiddleware: function (devServer) {
      if (!devServer) {
        throw new Error('webpack-dev-server is not defined');
      }
      mock(devServer.app)
      // devServer.app.get('/some/path', function (req, res) {
      //   res.json({ custom: 'response' });
      // });
    },
  }
})